<template>
    <page-main>
        <el-form size="mini" :inline="true" :model="searchs" class="demo-form-inline">
            <el-form-item label="活动区域">
                <el-select v-model="searchs.region" clearable="" placeholder="状态">
                    <el-option label="操作中" value="0" />
                    <el-option label="已完成" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="serach">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add">创建订单</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            border
            style="width: 100%;"
        >
            <el-table-column
                prop="date"
                align="center"
                label="日期"
                width="180"
            />
            <el-table-column
                align="center"
                prop="name"
                label="姓名"
                width="180"
            />
            <el-table-column
                align="center"
                prop="address"
                label="地址"
            />
            <el-table-column
                prop="sex"
                align="center"
                label="性别"
            />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="handleEdit( scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        size="mini"
                        type="default"
                        @click="handleDelete(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <Page :page="page" @current-change="currentChange" @size-change="sizeChange" />
    </page-main>
</template>

<script>
import Page from '@/components/page'
export default {
    components: {
        Page
    },
    data() {
        return {
            tableData: [
                {
                    date: '2021-03-05',
                    name: '特刚',
                    address: '陕西省西安市',
                    sex: '男'
                },
                {
                    date: '2021-03-05',
                    name: '特刚',
                    address: '陕西省西安市',
                    sex: '男'
                },
                {
                    date: '2021-03-05',
                    name: '特刚',
                    address: '陕西省西安市',
                    sex: '男'
                },
                {
                    date: '2021-03-05',
                    name: '特刚',
                    address: '陕西省西安市',
                    sex: '男'
                }
            ],
            page: {
                current: 1,
                size: 10,
                total: 200
            },
            searchs: {
                users: ''
            }
        }
    },
    methods: {
        add() {
            this.$router.push({name: 'OrderAdd'})
        },
        currentChange(d) {
            this.page.current = d
            this.$message.success('反野了')
        },
        sizeChange(d) {
            this.page.size = d
        },
        handleDelete(d) {
            this.$confirm('确定删除当前商品数据吗？', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            // eslint-disable-next-line no-unused-vars
            }).then(__ => {
                console.log(d)
            // eslint-disable-next-line no-unused-vars
            }).catch(_ => {})
        }
    }
}
</script>

<style scope>
.box {
    color: red;
}
</style>
